<template>
  <div class="subpage">
    <!-- subpage是二级页面 -->
    <myhead title="注册" :back="true"></myhead>
    <van-form ref="form" @submit="onSubmit" @failed="onFail" class="form">
      <!-- clearable清除记录   @failed校验失败-->
      <van-field
        v-model="form.username"
        clearable
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <!-- pattern 正则验证-->
      <van-field
        v-model="form.phone"
        clearable
        name="phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: reg.phone, message: '请输入正确的手机号' },
        ]"
      />
      <van-field
        v-model="form.email"
        clearable
        name="email"
        label="电子邮箱"
        placeholder="请输入电子邮箱"
        :rules="[
          { required: true, message: '请输入电子邮箱' },
          { pattern: reg.email, message: '请输入正确的电子邮箱' },
        ]"
      />
      <van-field
        v-model="form.password"
        :type="type"
        name="password"
        clearable
        label="密码"
        placeholder="请输入密码"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType"
        :rules="[
          { required: true, message: '请输入密码' },
          { pattern: reg.pwd, message: '请输入6-16位数字加字母组成的密码' },
        ]"
        @blur="checkDbPass"
      />
      <!-- @blur="checkDbPass" 失焦的时候比较是否与二次密码一致 -->
      <van-field
        v-model="form.dbpassword"
        :type="type1"
        name="dbpassword"
        clearable
        label="确认密码"
        placeholder="请输入确认密码"
        :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType1"
        :rules="[
          { required: true, message: '请输入确认密码' },
          { validator: checkPadd, message: '请输入6-16位数字加字母组成的密码' },
          { validator: checkPasddEqual, message: '两次密码不一致' },
        ]"
      />
      <!-- validator 固定的正则函数-->
      <div style="margin: 36px" class="links">
        <p>
          <router-link class="color1" :to="{ name: 'login' }"
            >已有账号,立即登录</router-link
          >
        </p>
        <p>
          <router-link class="color2" :to="{ name: 'wangjipwd' }"
            >忘记密码</router-link
          >
        </p>
      </div>
      <div style="margin: 16px">
        <van-button block type="warning" native-type="submit"
          >注册账号</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: "zhuce",
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
    };
  },
  mounted () {
      //axios请求jsonserver里data.json接口
    //   this.$axios.get("http://localhost:2110/test")
    //   .then(res=>{
    //       console.log("接口请求成功",res)
    //   })

      // this.$ajax.test({id:1})
      // .then(res=>{
      //     console.log("接口请求成功",res)
      // })

      this.getTest()
    //   async  +  await 必须搭配一起使用
  },
  methods: {
    async getTest(){
      let res=await this.$ajax.test({id:2110})
    },
      checkDbPass(){
          //blur 失焦事件
        //   第一个密码输完后才显示二次密码
          if(this.reg.pwd.test(this.form.dbpassword)){
              //第一个密码 校验二次密码
              this.$refs.form.validate('dbpassword')
          }          
      },
    checkPasddEqual() {
        // 验证两次密码是否相同
        if(this.reg.pwd.test(this.form.password)){
            return this.form.password==this.form.dbpassword
        }
    },
    checkPadd(val) {
      //正则验证函数
      return this.reg.pwd.test(val);
    },
    changeType() {
      // 密码眼睛切换
      this.type = this.type == "password" ? "text" : "password";
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    onSubmit(values) {
      console.log("submit", values);
      //先判断是否已经注册，没有才能注册
      this.$ajax.findUser({
        // 输入的信息是否与库里的数据一致
        phone:values.phone,
        username:values.username
      })
      .then(res=>{
        if(res.length>0){
          //已经注册了
          this.$toast("当前用户已经注册，请重新注册")
        }else{
          //用户未被注册，添加到接口去
          this.$ajax.addUser(values)//添加 见api里的index
          .then(res=>{
            this.$notify({ type: 'success', message: '注册成功' });
            this.$nextTick(()=>{//延迟执行
              // this.tiao('login')//注册成功跳转到登录页面
              this.$router.push({name:'login',query:{username:values.username}})
              //注册成功跳转到登录页面并带username参数过来
            });
          })
        }
      })
    },
    onFail(){
        this.$toast('输入错误,请重新输入')
    }
  },
};
</script>
<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: #0f0;
  }
  .color2 {
    color: #f50;
  }
}
</style>